<template>
	<div class="login">
		<div class="content flex">
			<el-card :body-style="{ padding: '20px' }" style="width: 400px">
				<div slot="header">
					<span>Login</span>
				</div>
				<el-form ref="form" :model="form" :rules="rules" status-icon>
					<el-form-item prop="userAccount">
						<el-input v-model="form.userAccount" clearable>
							<i slot="prepend" class="el-icon-user" />
						</el-input>
					</el-form-item>
					<el-form-item prop="userPassword">
						<el-input
							v-model="form.userPassword"
							clearable
							show-password
							@keyup.enter.native="onSubmit"
						>
							<i slot="prepend" class="el-icon-lock" />
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							round
							style="width: 100%"
							@click="onSubmit"
						>
							登录
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<div class="footer">
			<!--Waves Container-->
			<div>
				<svg
					class="waves"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
					viewBox="0 24 150 28"
					preserveAspectRatio="none"
					shape-rendering="auto"
				>
					<defs>
						<path
							id="gentle-wave"
							d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
						/>
					</defs>
					<g class="parallax">
						<use
							xlink:href="#gentle-wave"
							x="48"
							y="0"
							fill="rgba(255,255,255,0.7"
						/>
						<use
							xlink:href="#gentle-wave"
							x="48"
							y="3"
							fill="rgba(255,255,255,0.5)"
						/>
						<use
							xlink:href="#gentle-wave"
							x="48"
							y="5"
							fill="rgba(255,255,255,0.3)"
						/>
						<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
					</g>
				</svg>
			</div>
			<!--Waves end-->
		</div>
		<div class="footerText flex">
			<p>上海翊廷| 2021 | Health indicators</p>
		</div>
		<!--Header ends-->
	</div>
</template>

<script>
import { login } from '@/http/api.js'
import { mapMutations } from 'vuex'

export default {
	name: 'Login',
	data() {
		return {
			form: {
				userAccount: '',
				userPassword: '',
				// verify: '',
			},
			imgSrc: '',
			rules: {
				userAccount: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{
						min: 2,
						max: 11,
						message: '长度在 2 到 11 个字符',
						trigger: 'blur',
					},
				],
				verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
				userPassword: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{
						min: 2,
						max: 11,
						message: '长度在 2 到 11 个字符',
						trigger: 'blur',
					},
				],
			},
		}
	},
	methods: {
		...mapMutations('user', ['CHANGE_USERMSG']),
		onSubmit() {
			this.$refs.form.validate(async valid => {
				if (valid) {
					login(this.form)
						.then(({ data: { data } }) => {
							if (data.token && data.user) {
								this.CHANGE_USERMSG({
									token: data.token,
									...data.user,
								})
								this.$router.push('/')
							}
						})
						.catch(() => {})
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.login {
	background-color: #fff;
	height: 100%;
	text-align: center;
	background: linear-gradient(
		60deg,
		rgba(84, 58, 183, 1) 0%,
		rgba(0, 172, 193, 1) 100%
	);
	color: white;
	position: relative;
	::v-deep .el-card,
	.el-message {
		border-radius: 15px;
	}
	.content {
		height: 100%;
	}
	.footer {
		height: 25vh;
		position: absolute;
		left: 0;
		bottom: 0vh;
		width: 100%;
	}
	p {
		font-family: 'Lato', sans-serif;
		letter-spacing: 1px;
		font-size: 14px;
		color: #333333;
	}

	.flex {
		/*Flexbox for containers*/
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.waves {
		position: relative;
		width: 100%;
		height: 25vh;
		margin-bottom: -7px; /*Fix for safari gap*/
		min-height: 100px;
		max-height: 150px;
	}

	/* Animation */

	.parallax > use {
		animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
	}
	.parallax > use:nth-child(1) {
		animation-delay: -2s;
		animation-duration: 7s;
	}
	.parallax > use:nth-child(2) {
		animation-delay: -3s;
		animation-duration: 10s;
	}
	.parallax > use:nth-child(3) {
		animation-delay: -4s;
		animation-duration: 13s;
	}
	.parallax > use:nth-child(4) {
		animation-delay: -5s;
		animation-duration: 20s;
	}
	@keyframes move-forever {
		0% {
			transform: translate3d(-90px, 0, 0);
		}
		100% {
			transform: translate3d(85px, 0, 0);
		}
	}
	.footerText {
		position: absolute;
		height: 10vh;
		bottom: 0px;
		left: 0px;
		width: 100%;
		text-align: center;
		background-color: white;
	}
}
</style>
